<template>
  <div class="chat-container">
    <h1>小小翾 对话</h1>
    <div class="chat-box">
      <div
          v-for="(message, index) in messages"
          :key="index"
          :class="['message', message.sender === 'user' ? 'user-message' : 'bot-message']"
      >
        {{ message.text }}
      </div>
      <!-- 加载动画 -->
      <div v-if="loading" class="loading-spinner"></div>
    </div>
    <div class="input-area">
      <input
          v-model="userInput"
          type="text"
          placeholder="输入你的消息..."
          @keyup.enter="sendMessage"
      />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInput: '', // 用户输入
      messages: [], // 聊天记录
      loading: false, // 加载状态
    };
  },
  methods: {
    async sendMessage() {
      const message = this.userInput.trim();
      if (!message) return;

      // 添加用户消息
      this.messages.push({ sender: 'user', text: message });
      this.userInput = ''; // 清空输入框

      // 设置加载状态
      this.loading = true;

      // 创建 EventSource 连接
      const eventSource = new EventSource(`http://localhost:81/api/deepseek/chat-stream?userMessage=${encodeURIComponent(message)}`);

      // 初始化一个变量来存储流式数据
      let botMessage = { sender: 'bot', text: '' };

      // 监听消息事件
      eventSource.onmessage = (event) => {
        try {
          // 提取有效数据部分（去掉 "data: " 前缀）
          const rawData = event.data;
          const jsonData = rawData.replace(/^data: /, ''); // 去掉 "data: " 前缀

          // 解析 JSON 数据
          const data = JSON.parse(jsonData);

          if (data.choices && data.choices[0].delta.content) {
            // 拼接流式数据
            botMessage.text += data.choices[0].delta.content;
            // 更新消息列表
            this.messages = [...this.messages.filter(m => m !== botMessage), botMessage];
            this.scrollToBottom();
          }
        } catch (error) {
          console.error('解析数据出错:', error); // 记录错误日志，但不渲染到页面
        }
      };

      // 监听错误事件
      eventSource.onerror = (error) => {
        console.error('EventSource 错误:', error); // 记录错误日志，但不渲染到页面

        // 关闭当前连接
        eventSource.close();

        // 取消加载状态
        this.loading = false;

        // 尝试重新连接
        setTimeout(() => {
          this.sendMessage();
        }, 3000); // 3秒后重试
      };
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const chatBox = this.$el.querySelector('.chat-box');
        chatBox.scrollTop = chatBox.scrollHeight;
      });
    },
  },
};
</script>

<style scoped>
.chat-container {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #6200ea;
  margin-bottom: 20px;
  font-size: 24px;
}

.chat-box {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
}

.message {
  margin-bottom: 15px;
  padding: 10px 15px;
  border-radius: 10px;
  max-width: 80%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-message {
  background-color: #6200ea;
  color: #fff;
  margin-left: auto;
}

.bot-message {
  background-color: #e0e0e0;
  color: #333;
  margin-right: auto;
}

.input-area {
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
}

button {
  padding: 10px 20px;
  background-color: #6200ea;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #3700b3;
}

/* 加载动画样式 */
.loading-spinner {
  border: 4px solid #f3f3f3; /* 浅灰色边框 */
  border-top: 4px solid #6200ea; /* 紫色顶部边框 */
  border-radius: 50%; /* 圆形 */
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite; /* 旋转动画 */
  margin: 20px auto; /* 居中 */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>